<template>
    <div style="padding-left:50px;">
        <v-stage ref="stage" :config="stageSize">
            <v-layer>
                <v-text :config="{x: 150, text: '1 2 3', fontSize: 50}"/>
                <v-image :config="{
                    x: 0,
                    y: 50,
                    image: image,
                    width: 50,
                    height: 50,
                  }"/>

                <v-text :config="{x: 150, y: 50, text: '4 5 6', fontSize: 50, padding: 0,}"/>

                <v-line :config="{
                    x: 0,
                    y: 100,
                    points: [0, 0, 300, 0],
                    stroke: 'black',
                  }"/>

                <v-text :config="{x: 150, y: 101, text: '7 3 8', fontSize: 50, padding: 0,}"/>
                <v-text :config="{x: 110, y: 151, text: '6 1 5', fontSize: 50, padding: 0,}"/>
                <v-text :config="{x: 70, y: 201, text: '4 9 2', fontSize: 50, padding: 0,}"/>

                <v-line :config="{
                    x: 0,
                    y: 250,
                    points: [0, 0, 300, 0],
                    stroke: 'black',
                  }"/>

                <v-text :config="{x: 70, y: 251, text: '5 6 0 8 8', fontSize: 50, padding: 0,}"/>


            </v-layer>
        </v-stage>
    </div>
</template>

<script>
    const width = window.innerWidth;
    const height = window.innerHeight;
    export default {
        data() {
            return {
                stageSize: {
                    width: width,
                    height: height
                },
                image: null
            };
        },
        created() {
            const image = new window.Image();
            // image.src = "https://konvajs.org/assets/yoda.jpg";
            image.src = "../static/math/乘号.png";
            image.onload = () => {
                // set image only when it is loaded
                this.image = image;
            };
        }
    };
</script>
